import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import FingerItem from '@components/finger-item';
import './index.less';

/* eslint-disable */
const labelMap = {
  web_title: '网站标题',
  web_app: 'Web应用',
  web_server: 'Web容器',
  web_framwork: 'Web框架',
  web_waf: '防护信息',
  web_db: '数据库',
  web_language: '开发语言',
  web_header: 'HTTP头'
};
/* eslint-enable */
const labels = [
  'web_title',
  'web_app',
  'web_server',
  'web_framwork',
  'web_waf',
  'web_db',
  'web_language',
  'web_header'
];

const knowlegdeFingerKeys = [
  'web_app',
  'web_server',
  'web_framwork',
  'web_waf',
  'web_db',
  'web_language'
];

const WebResult = props => {
  const { data } = props;
  // eslint-disable-next-line
  data.web_headers = _.get(data, 'details', [])
    .map(i => _.get(i, 'web_header', '').trim())
    .filter(Boolean);
  let updatedElement = <span className="updated">[有更新]</span>;
  return (
    <div className="c-web-result">
      {labels.map(key => {
        const values = _.uniq(_.compact(_.get(data, `${key}s`, [])));
        let valueElement = null;
        if (_.includes(knowlegdeFingerKeys, key) && values.length) {
          valueElement = values.map(value => (
            <FingerItem key={value} name={value} fullName={value} rawType={key} />
          ));
        } else {
          valueElement = values.join(', ').trim() || '-';
        }

        return (
          <div className="item" key={key}>
            <span className="label">
              {_.get(data, `${key}_updated`) ? updatedElement : null}
              {labelMap[key]}
            </span>
            <span className="value">{valueElement}</span>
          </div>
        );
      })}
    </div>
  );
};
/* eslint-disable  camelcase */
WebResult.propTypes = {
  data: PropTypes.array
};
/* eslint-enable */

export default WebResult;
